<template>
  <div class="exam-page">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="container">
        <h1>校测考纲</h1>
        <p class="subtitle">提前招生校测考试大纲及相关资料</p>
      </div>
    </div>

    <!-- 主要内容 -->
    <div class="container">
      <div class="main-content">
        <!-- 搜索筛选 -->
        <el-card class="filter-card" shadow="hover">
          <template #header>
            <h2><el-icon><Search /></el-icon> 搜索考纲</h2>
          </template>
          
          <el-form :model="searchForm" :inline="true" label-width="80px">
            <el-form-item label="院校">
              <el-select v-model="searchForm.schoolId" placeholder="选择院校" clearable>
                <el-option v-for="school in schools" :key="school.id" :label="school.name" :value="school.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="专业">
              <el-select v-model="searchForm.majorId" placeholder="选择专业" clearable>
                <el-option v-for="major in majors" :key="major.id" :label="major.name" :value="major.id" />
              </el-select>
            </el-form-item>
            <el-form-item label="年份">
              <el-date-picker
                v-model="searchForm.examYear"
                type="year"
                placeholder="选择年份"
                value-format="YYYY"
              />
            </el-form-item>
            <el-form-item label="考试类型">
              <el-select v-model="searchForm.examType" placeholder="考试类型" clearable>
                <el-option label="校测" value="school_test" />
                <el-option label="面试" value="interview" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadOutlines">搜索</el-button>
              <el-button @click="resetSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>

        <!-- 考纲列表 -->
        <el-card v-loading="loading" class="outlines-card" shadow="hover">
          <template #header>
            <h2><el-icon><Document /></el-icon> 考纲列表</h2>
          </template>

          <div v-if="outlines.length > 0" class="outlines-grid">
            <div 
              v-for="outline in outlines" 
              :key="outline.id" 
              class="outline-item"
              @click="viewOutline(outline)"
            >
              <div class="outline-header">
                <h3>{{ outline.title }}</h3>
                <el-tag :type="outline.examType === 'school_test' ? 'primary' : 'success'">
                  {{ outline.examType === 'school_test' ? '校测' : '面试' }}
                </el-tag>
              </div>
              
              <div class="outline-info">
                <div class="info-row">
                  <span class="label">院校：</span>
                  <span class="value">{{ outline.schoolName }}</span>
                </div>
                <div v-if="outline.majorName" class="info-row">
                  <span class="label">专业：</span>
                  <span class="value">{{ outline.majorName }}</span>
                </div>
                <div class="info-row">
                  <span class="label">年份：</span>
                  <span class="value">{{ outline.examYear }}年</span>
                </div>
                <div class="info-row">
                  <span class="label">科目：</span>
                  <span class="value">{{ outline.subjectName }}</span>
                </div>
                <div class="info-row">
                  <span class="label">总分：</span>
                  <span class="value">{{ outline.totalScore }}分</span>
                </div>
                <div class="info-row">
                  <span class="label">时长：</span>
                  <span class="value">{{ outline.examDuration }}分钟</span>
                </div>
                <div class="info-row">
                  <span class="label">下载量：</span>
                  <span class="value">{{ outline.downloadCount }}次</span>
                </div>
              </div>

              <div class="outline-content">
                <h4>考试内容概要</h4>
                <p>{{ outline.outlineContent || '暂无内容概要' }}</p>
              </div>

              <div class="outline-actions">
                <el-button type="primary" size="small" @click.stop="viewDetail(outline)">
                  查看详情
                </el-button>
                <el-button 
                  v-if="outline.fileUrl" 
                  type="success" 
                  size="small" 
                  @click.stop="downloadOutline(outline)"
                >
                  下载考纲
                </el-button>
              </div>
            </div>
          </div>

          <el-empty v-else description="暂无考纲信息" />

          <!-- 分页 -->
          <div v-if="pagination.total > 0" class="pagination-wrapper">
            <el-pagination
              v-model:current-page="pagination.page"
              v-model:page-size="pagination.size"
              :total="pagination.total"
              :page-sizes="[12, 24, 48]"
              layout="total, sizes, prev, pager, next, jumper"
              @size-change="loadOutlines"
              @current-change="loadOutlines"
            />
          </div>
        </el-card>

        <!-- 考试须知 -->
        <el-card class="notice-card" shadow="hover">
          <template #header>
            <h2><el-icon><InfoFilled /></el-icon> 考试须知</h2>
          </template>
          <div class="notice-content">
            <ol>
              <li>请提前下载并仔细阅读相关院校专业的考试大纲</li>
              <li>考试大纲包含考试形式、内容范围、题型分布等重要信息</li>
              <li>建议根据考纲要求制定复习计划，重点复习相关知识点</li>
              <li>如考纲中有推荐参考书目，建议优先阅读</li>
              <li>校测时间和地点将另行通知，请关注院校官方信息</li>
              <li>考试时需携带身份证、准考证等相关证件</li>
            </ol>
          </div>
        </el-card>
      </div>
    </div>

    <!-- 考纲详情对话框 -->
    <el-dialog v-model="detailDialogVisible" title="考纲详情" width="80%" top="5vh">
      <div v-if="selectedOutline" class="outline-detail">
        <!-- 基本信息 -->
        <div class="detail-section">
          <h3>基本信息</h3>
          <div class="detail-grid">
            <div class="detail-item">
              <span class="label">考纲标题：</span>
              <span class="value">{{ selectedOutline.title }}</span>
            </div>
            <div class="detail-item">
              <span class="label">院校：</span>
              <span class="value">{{ selectedOutline.schoolName }}</span>
            </div>
            <div class="detail-item">
              <span class="label">专业：</span>
              <span class="value">{{ selectedOutline.majorName || '通用' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">考试年份：</span>
              <span class="value">{{ selectedOutline.examYear }}年</span>
            </div>
            <div class="detail-item">
              <span class="label">考试类型：</span>
              <span class="value">{{ selectedOutline.examType === 'school_test' ? '校测' : '面试' }}</span>
            </div>
            <div class="detail-item">
              <span class="label">科目名称：</span>
              <span class="value">{{ selectedOutline.subjectName }}</span>
            </div>
            <div class="detail-item">
              <span class="label">考试时长：</span>
              <span class="value">{{ selectedOutline.examDuration }}分钟</span>
            </div>
            <div class="detail-item">
              <span class="label">总分：</span>
              <span class="value">{{ selectedOutline.totalScore }}分</span>
            </div>
            <div class="detail-item">
              <span class="label">考试形式：</span>
              <span class="value">{{ getExamFormatText(selectedOutline.examFormat) }}</span>
            </div>
          </div>
        </div>

        <!-- 考试内容 -->
        <div v-if="selectedOutline.outlineContent" class="detail-section">
          <h3>考试内容</h3>
          <div class="content-text">{{ selectedOutline.outlineContent }}</div>
        </div>

        <!-- 知识点 -->
        <div v-if="selectedOutline.knowledgePoints" class="detail-section">
          <h3>重点知识</h3>
          <div class="content-text">{{ selectedOutline.knowledgePoints }}</div>
        </div>

        <!-- 参考书目 -->
        <div v-if="selectedOutline.referenceBooks" class="detail-section">
          <h3>参考书目</h3>
          <div class="content-text">{{ selectedOutline.referenceBooks }}</div>
        </div>
      </div>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="detailDialogVisible = false">关闭</el-button>
          <el-button 
            v-if="selectedOutline?.fileUrl" 
            type="primary" 
            @click="downloadOutline(selectedOutline)"
          >
            下载考纲
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue'
import { ElMessage } from 'element-plus'
import { Search, Document, InfoFilled } from '@element-plus/icons-vue'
import api from '@/api'

// 响应式数据
const loading = ref(false)
const outlines = ref([])
const schools = ref([])
const majors = ref([])
const detailDialogVisible = ref(false)
const selectedOutline = ref(null)

const searchForm = reactive({
  schoolId: '',
  majorId: '',
  examYear: new Date().getFullYear().toString(),
  examType: ''
})

const pagination = reactive({
  page: 1,
  size: 12,
  total: 0
})

// 方法
const loadOutlines = async () => {
  loading.value = true
  try {
    const params = {
      page: pagination.page,
      size: pagination.size,
      ...searchForm
    }
    const { data } = await api.get('/exam/outlines/public', { params })
    outlines.value = data.records || []
    pagination.total = data.total || 0
  } catch (error) {
    ElMessage.error('加载考纲失败')
  } finally {
    loading.value = false
  }
}

const loadSchools = async () => {
  try {
    const { data } = await api.get('/schools')
    schools.value = data.records || []
  } catch (error) {
    console.error('加载院校失败:', error)
  }
}

const loadMajors = async () => {
  if (searchForm.schoolId) {
    try {
      const { data } = await api.get('/majors', { 
        params: { schoolId: searchForm.schoolId } 
      })
      majors.value = data.records || []
    } catch (error) {
      console.error('加载专业失败:', error)
    }
  } else {
    majors.value = []
  }
}

const resetSearch = () => {
  Object.assign(searchForm, {
    schoolId: '',
    majorId: '',
    examYear: new Date().getFullYear().toString(),
    examType: ''
  })
  majors.value = []
  loadOutlines()
}

const viewOutline = (outline) => {
  // 可以添加点击整个卡片的逻辑
}

const viewDetail = (outline) => {
  selectedOutline.value = outline
  detailDialogVisible.value = true
}

const downloadOutline = async (outline) => {
  try {
    // 增加下载计数
    await api.post(`/exam/outlines/${outline.id}/download`)
    
    // 模拟文件下载
    if (outline.fileUrl) {
      const link = document.createElement('a')
      link.href = outline.fileUrl
      link.download = `${outline.title}-考试大纲.pdf`
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
      
      ElMessage.success('下载成功')
      
      // 更新下载计数
      outline.downloadCount = (outline.downloadCount || 0) + 1
    } else {
      ElMessage.warning('暂无可下载文件')
    }
  } catch (error) {
    ElMessage.error('下载失败，请稍后重试')
  }
}

const getExamFormatText = (format) => {
  const formatMap = {
    written: '笔试',
    oral: '口试',
    practical: '实践'
  }
  return formatMap[format] || format || '未知'
}

// 监听
watch(() => searchForm.schoolId, () => {
  searchForm.majorId = ''
  loadMajors()
})

// 初始化
onMounted(() => {
  loadOutlines()
  loadSchools()
})
</script>

<style lang="scss" scoped>
.exam-page {
  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 60px 0;
    text-align: center;
    
    h1 {
      font-size: 2.5rem;
      margin-bottom: 16px;
      font-weight: 600;
    }
    
    .subtitle {
      font-size: 1.2rem;
      opacity: 0.9;
    }
  }
  
  .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .main-content {
    margin-top: -40px;
    position: relative;
    z-index: 1;
    
    .el-card {
      margin-bottom: 30px;
      border-radius: 12px;
      
      .el-card__header {
        background: #f8f9fa;
        border-bottom: 1px solid #e9ecef;
        
        h2 {
          margin: 0;
          color: #495057;
          display: flex;
          align-items: center;
          gap: 8px;
        }
      }
    }
  }
  
  .filter-card {
    .el-form {
      .el-form-item {
        margin-bottom: 16px;
      }
    }
  }
  
  .outlines-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
    
    .outline-item {
      border: 1px solid #e4e7ed;
      border-radius: 12px;
      padding: 20px;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        border-color: #409eff;
        box-shadow: 0 4px 12px rgba(64, 158, 255, 0.15);
        transform: translateY(-2px);
      }
      
      .outline-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 16px;
        
        h3 {
          margin: 0;
          font-size: 18px;
          color: #303133;
          flex: 1;
          margin-right: 12px;
        }
      }
      
      .outline-info {
        margin-bottom: 16px;
        
        .info-row {
          display: flex;
          align-items: center;
          margin-bottom: 8px;
          font-size: 14px;
          
          .label {
            color: #909399;
            min-width: 60px;
          }
          
          .value {
            color: #606266;
            font-weight: 500;
          }
        }
      }
      
      .outline-content {
        margin-bottom: 16px;
        
        h4 {
          margin: 0 0 8px 0;
          font-size: 16px;
          color: #303133;
        }
        
        p {
          margin: 0;
          font-size: 14px;
          color: #606266;
          line-height: 1.6;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }
      }
      
      .outline-actions {
        display: flex;
        gap: 8px;
      }
    }
  }
  
  .pagination-wrapper {
    text-align: center;
    margin-top: 24px;
  }
  
  .notice-content {
    ol {
      padding-left: 20px;
      
      li {
        margin-bottom: 12px;
        line-height: 1.6;
        color: #6c757d;
      }
    }
  }
}

.outline-detail {
  .detail-section {
    margin-bottom: 32px;
    
    h3 {
      margin: 0 0 20px 0;
      padding: 0 0 12px 0;
      border-bottom: 2px solid #409eff;
      color: #303133;
      font-size: 18px;
    }
  }
  
  .detail-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
    
    .detail-item {
      display: flex;
      align-items: center;
      
      .label {
        font-weight: 600;
        color: #606266;
        min-width: 120px;
      }
      
      .value {
        color: #303133;
        font-weight: 500;
      }
    }
  }
  
  .content-text {
    line-height: 1.8;
    color: #606266;
    white-space: pre-wrap;
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
  }
}

.dialog-footer {
  text-align: right;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .exam-page {
    .page-header {
      padding: 40px 0;
      
      h1 {
        font-size: 2rem;
      }
      
      .subtitle {
        font-size: 1rem;
      }
    }
    
    .outlines-grid {
      grid-template-columns: 1fr !important;
    }
    
    .detail-grid {
      grid-template-columns: 1fr !important;
    }
    
    .outline-header {
      flex-direction: column;
      align-items: flex-start;
      
      h3 {
        margin-bottom: 8px;
        margin-right: 0;
      }
    }
  }
}
</style>